<template>
  <TopNav title="术前营养评估"/>
  <div class="preoperative-assessment-page">
    <!-- 患者信息输入区域 -->
    <div class="patient-info">
      <h2 class="info-title">患者基本信息</h2>
      <el-form :model="patientForm">
        <el-form-item label="姓名">
          <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="patientForm.age"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="patientForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身高(cm)">
          <el-input-number v-model="patientForm.height"></el-input-number>
        </el-form-item>
        <el-form-item label="体重(kg)">
          <el-input-number v-model="patientForm.weight"></el-input-number>
        </el-form-item>
        <el-form-item label="疾病诊断">
          <el-input v-model="patientForm.diagnosis"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 营养评估指标区域 -->
    <div class="assessment-indicators">
      <h2 class="indicators-title">营养评估指标</h2>
      <el-form :model="assessmentForm">
        <el-form-item label="血清白蛋白(g/L)">
          <el-input-number v-model="assessmentForm.albumin" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="前白蛋白(mg/L)">
          <el-input-number v-model="assessmentForm.prealbumin" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="血红蛋白(g/L)">
          <el-input-number v-model="assessmentForm.hemoglobin" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="淋巴细胞计数(×10^9/L)">
          <el-input-number v-model="assessmentForm.lymphocyteCount" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="身体质量指数(BMI)">
          <el-input-number v-model="assessmentForm.bmi" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
    </div>

    <!-- 评估结果与方案区域 -->
    <div class="assessment-result">
      <h2 class="result-title">评估结果与营养方案</h2>
      <p>营养状态：<span>{{ nutritionStatus }}</span></p>
      <p>营养方案：<span>{{ nutritionPlan }}</span></p>
      <el-button type="primary" @click="generateAssessment">生成评估</el-button>
    </div>

    <!-- 图表区域（可选，用于展示一些评估指标趋势等） -->
    <div class="chart-area">
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
// 患者信息表单数据
const patientForm = ref({
  name: '',
  age: 0,
  gender: '',
  height: 0,
  weight: 0,
  diagnosis: ''
});

// 营养评估表单数据
const assessmentForm = ref({
  albumin: 0,
  prealbumin: 0,
  hemoglobin: 0,
  lymphocyteCount: 0,
  bmi: 0
});

// 营养状态
const nutritionStatus = ref('');
// 营养方案
const nutritionPlan = ref('');

// 计算 BMI
const calculateBMI = () => {
  const heightInMeters = patientForm.value.height / 100;
  const bmiValue = patientForm.value.weight / (heightInMeters * heightInMeters);
  assessmentForm.value.bmi = bmiValue;
};

// 根据评估指标生成营养状态和方案
const generateAssessment = () => {
  calculateBMI();
  if (assessmentForm.value.albumin < 35 && assessmentForm.value.prealbumin < 180 && assessmentForm.value.hemoglobin < 120 && assessmentForm.value.lymphocyteCount < 1.5 && assessmentForm.value.bmi < 18.5) {
    nutritionStatus.value = '严重营养不良';
    nutritionPlan.value = '高能量、高蛋白、富含维生素和矿物质的全营养配方，可采用口服营养补充剂结合肠内营养支持，必要时考虑肠外营养过渡。';
  } else if (assessmentForm.value.albumin >= 35 && assessmentForm.value.albumin < 40 && assessmentForm.value.prealbumin >= 180 && assessmentForm.value.prealbumin < 200 && assessmentForm.value.hemoglobin >= 120 && assessmentForm.value.hemoglobin < 130 && assessmentForm.value.lymphocyteCount >= 1.5 && assessmentForm.value.lymphocyteCount < 2 && assessmentForm.value.bmi >= 18.5 && assessmentForm.value.bmi < 24) {
    nutritionStatus.value = '轻度营养不良';
    nutritionPlan.value = '适当增加蛋白质和能量摄入，优化饮食结构，增加富含优质蛋白质食物如瘦肉、鱼类、蛋类、豆类等，保证充足的蔬菜水果摄入，可根据情况补充维生素和矿物质制剂。';
  } else {
    nutritionStatus.value = '营养良好';
    nutritionPlan.value = '维持均衡饮食，保证每日足够的能量、蛋白质、碳水化合物、脂肪、维生素和矿物质摄入，可根据手术类型和个人喜好适当调整饮食。';
  }
  // 这里可以根据实际情况进一步完善评估逻辑和生成更精准的方案

  // 示例：简单的图表数据更新（可根据实际需求完善图表展示）
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['白蛋白', '前白蛋白', '血红蛋白', '淋巴细胞计数', 'BMI'];
  const yAxisData = [
    assessmentForm.value.albumin,
    assessmentForm.value.prealbumin,
    assessmentForm.value.hemoglobin,
    assessmentForm.value.lymphocyteCount,
    assessmentForm.value.bmi
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '评估指标',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表（空数据初始化）
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['白蛋白', '前白蛋白', '血红蛋白', '淋巴细胞计数', 'BMI'];
  const yAxisData = [0, 0, 0, 0, 0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '评估指标',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.preoperative-assessment-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-info {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.info-title {
  color: #303133;
  margin-bottom: 10px;
}
.assessment-indicators {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.indicators-title {
  color: #303133;
  margin-bottom: 10px;
}
.assessment-result {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.result-title {
  color: #303133;
  margin-bottom: 10px;
}
.chart-area {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>
